<template>
	<view class="_pad-x-10 _pad-top-10 _pad-bottom-90">
		<view class="_white-bg _pad-15 _mar-bottom-10" style="border-radius: 20rpx;">
			<view class="_font-18 " style="color: #ed4014;" v-if="rerentInfo.pay_time == '暂无'">待支付：￥{{ rerentInfo.rerent_price }}</view>
			<view class="_font-18 " style="color: #19be6b;" v-else>已支付：￥{{ rerentInfo.rerent_price }}</view>
			<view v-if="true" class="_mar-top-15">
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
					<view class="_grey-99">支付方式</view>
					<view>{{ rerentInfo.pay_type }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14">
					<view class="_grey-99">支付时间</view>
					<view>{{ rerentInfo.pay_time }}</view>
				</view>
			</view>
		</view>
		<view class="_white-bg _pad-15 _mar-bottom-10" style="border-radius: 20rpx;" v-if="refundInfo.refund_no">
			<view class="_font-18 _mar-bottom-15">退款信息</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">退款单号</view>
				<view>{{ refundInfo.refund_no }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">退款金额</view>
				<view>￥{{ refundInfo.price }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14">
				<view class="_grey-99">退款状态</view>
				<view>{{ refundInfo.status_name }}</view>
			</view>
		</view>
		<view class="_white-bg _pad-15 _mar-bottom-10" style="border-radius: 20rpx;">
			<view class="_font-18 _mar-bottom-15">用车信息</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">续租开始时间</view>
				<view>{{ rerentInfo.start_time }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">续租结束时间</view>
				<view>{{ rerentInfo.end_time }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14">
				<view class="_grey-99">创建时是否有库存</view>
				<view>{{'有库存正常锁定'}}</view>
			</view>
		</view>
		<view class="_white-bg _pad-15 _mar-bottom-10" style="border-radius: 20rpx;">
			<view class="_font-18 _mar-bottom-15">续租费用</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">基本费用</view>
				<view>￥{{ rerentInfo.car_fee }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">基础服务费</view>
				<view>￥{{ rerentInfo.base_service_fee }}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">保险费</view>
				<view>￥{{ rerentInfo.car_service_fee }}</view>
			</view>
			<view class=" _font-16 _black _w-max _text-right" >总价：￥{{ rerentInfo.rerent_price }}</view>
		</view>
		<view class="_white-bg _pad-15 _mar-bottom-10" style="border-radius: 20rpx;">
			<view class="_font-18 _mar-bottom-15">创建信息</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">创建方</view>
				<view>{{'商家'}}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
				<view class="_grey-99">操作人</view>
				<view>{{ rerentInfo.user_name + ','+ rerentInfo.user_phone}}</view>
			</view>
			<view class="_flex-row-bet-mid _font-14">
				<view class="_grey-99">创建时间</view>
				<view>{{ rerentInfo.add_time }}</view>
			</view>
		</view>
		<view class="_pos-fixed _w-max _bottom _left _pad-y-20 _pad-x-15 _z-index-1 _white-bg">
			<view class="_w-max _text-center _white _font-16 theme-color-bg _pad-y-10" @click="orderRerentPay" style="border-radius: 200rpx;" v-if="rerentInfo.rerent_status === 0">订单支付</view>
		</view>
		<view class="auth-phone-box _flex-col" v-if="open_pay" @click="orderRerentPay">
			<view class="_pos-fixed _bottom _left _white-bg _pad-x-15 _z-index-2 _w-max transition-06" style="border-radius: 40rpx 40rpx 0px 0px;height: 50vh;" @click.stop="">
				<view class=" _pos-rel _w-max _flex-row-center-mid _font-16 _pad-top-10 _b _mar-bottom-15">选择支付方式</view>
				<view class="_white-bg">
					<view class="_pad-x-10 _pad-y-20 _border-bottom _flex-row-bet _font-14" @click="payment = 'yue'">
						<view class="_flex-row-mid">
							<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/yuepay-ico.png" mode=""></image>
							<view>余额支付 <text class="_grey-99 _font-12">（{{now_money}}）</text> </view>
						</view>
						<radio :checked="payment == 'yue'" />
					</view>
					<view class="_pad-x-10 _pad-y-20 _border-bottom _flex-row-bet _font-14" @click="payment = 'weixin'">
						<view class="_flex-row-mid">
							<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/wechatpay-ico.png" mode=""></image>
							<view>微信支付</view>
						</view>
						<radio :checked="payment == 'weixin'" />
					</view>
					<view class="_pad-x-10 _pad-y-20 _flex-row-bet _font-14" @click="payment = 'Offline'" v-if="false">
						<view class="_flex-row-mid">
							<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/Offline-ico.png" mode=""></image>
							<view>线下支付</view>
						</view>
						<radio :checked="payment == 'Offline'" />
					</view>
				</view>
				<view class="_text-center _white _font-16 _pad-y-10 pay-submit"@click="submit">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/user.js';
	import { getRerentDetail, payRerent, getRefundRerent } from '@/api/car.js';
	export default{
		data(){
			return{
				rerent_id:0,
				now_money: 0,
				open_pay: false,
				payment: 'weixin',
				rerentInfo:{},
				is_sumbit: false,
				refundInfo:{},
			}
		},
		onLoad(option){
			this.rerent_id = option.id;
			uni.showLoading({ title:'加载中...', mask:true })
			this.getDetail();
			this.getUserInfo();
		},
		methods:{
			// 微信支付
			wxplay(data){
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timestamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success() {
						that.is_sumbit = false;
						uni.showToast({ title:'微信支付成功', icon:'none' })
						that.getDetail();
						that.getUserInfo();
						that.open_pay = false;
					},fail(err) {
						that.is_sumbit = false;
						uni.showToast({ title: '取消支付', icon:'none' })
						that.open_pay = false;
					}
				})
			},
			// 立即支付
			submit(){
				let that = this;
				if (that.is_sumbit)  return uni.showToast({ title: '请求过于频繁，请稍后', icon: 'none' });
				if (that.payment == 'yue') {
					if (parseFloat(that.now_money) <= parseFloat(that.rerentInfo.rerent_price)) {
						return uni.showToast({ title: '余额不足~~', icon: 'none' });
					}
				}
				let param = {
					rerent_id: that.rerent_id,
					pay_type: that.payment
				}
				that.is_sumbit = true;
				uni.showLoading({ title:'提交中...', mask:true })
				payRerent(param).then((res)=>{
					uni.hideLoading();
					if(that.payment == 'weixin'){
						that.wxplay(res.data.result.jsConfig)
					}else if(that.payment == 'yue'){
						uni.showToast({ title:'余额支付成功', icon:'none' })
						that.getDetail();
						that.getUserInfo();
						that.is_sumbit = false;
						that.open_pay = false;
					}
				}).catch((err)=>{
					uni.hideLoading();
					that.is_sumbit = false;
					uni.showToast({ title:err, icon:'none' })
				})
				
			},
			// 订单支付
			orderRerentPay(){
				if(this.open_pay){
					this.open_pay = false
				}else{
					this.open_pay = true
				}
			},
			// 详情
			getDetail(){
				let that = this;
				let param = {
					rerent_id: that.rerent_id
				}
				getRerentDetail(param).then((res)=>{
					uni.hideLoading();
					that.rerentInfo = res.data;
				}).catch((err)=>{
					uni.hideLoading();
					uni.showToast({ title:err.msg, icon:'none' })
				})
			},
			// 获取用户信息
			getUserInfo() {
				let that = this;
				getUserInfo().then((res) => {
					that.now_money = res.data.now_money;
				}).catch((err) => {
					uni.showToast({title: '用户信息获取失败',icon: 'none'})
				})
			},
			// 获取退款续租订单
			getRefundRerent(){
				let that = this;
				let param = {
					rerent_id: that.rerent_id
				}
				getRefundRerent(param).then((res)=>{
					that.refundInfo = res.data;
				}).catch((err)=>{
					uni.showToast({title:err.msg,icon:'none'})
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.un-pay{
		color: #F52828;
	}
	.ed-pay{
		color: #BE9D78;
	}
	.auth-phone-box{
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		background-color: rgba(16, 16, 16, 0.6);
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.auth-phone {
			width: 540rpx;
			height: 520rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}
	.pay-submit{
		background-color: #525052;
		border-radius: 200rpx;
		position: absolute;
		right: 30rpx;
		left: 30rpx;
		bottom: 30rpx;
	}
</style>